<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html>
<head>
<%@ include file="/WEB-INF/jsp/include/head.jsp"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><html:text name="sys.name" /></title> 
<script type="text/javascript" src="<%=WEBPATH%>/scripts/jquery/jquery.js"></script> 
<script type="text/javascript" src="<%=WEBPATH%>/scripts/global.js?s=<%=generate%>"></script>
<script type="text/javascript" src="<%=WEBPATH%>/dwr/engine.js?id=<%=generate%>"></script>
<script type="text/javascript" src="<%=WEBPATH%>/dwr/util.js?id=<%=generate%>"></script>
<script type="text/javascript" src='<%=WEBPATH%>/dwr/interface/DictionaryAction.js?id=<%=generate%>'></script>
<script type="text/javascript" src='<%=WEBPATH%>/dwr/interface/DictionaryCombAction.js?id=<%=generate%>'></script>
<script type="text/javascript" src='<%=WEBPATH%>/dwr/interface/DictionaryDependAction.js?id=<%=generate%>'></script>
<script type="text/javascript" src='<%=WEBPATH%>/dwr/interface/DictionaryFilterAction.js?id=<%=generate%>'></script>
<script type="text/javascript" src='<%=WEBPATH%>/dwr/interface/DictionaryValueAction.js?id=<%=generate%>'></script>
<script type="text/javascript" src='<%=WEBPATH%>/dwr/interface/DictCategoryBean.js?id=<%=generate%>'></script>
<script type="text/javascript" src='<%=WEBPATH%>/dwr/interface/DictCategoryValueBean.js?id=<%=generate%>'></script>
<script type="text/javascript" src='<%=WEBPATH%>/dwr/interface/DictCategoryFilterBean.js?id=<%=generate%>'></script>

</head>
<body>
<form id="iform" name="iform">
<table width="100%" bordercolor="#000000" cellspacing="0" cellpadding="0" border="0" align="center">
	<tr>
		<td width="100" height="500" valign="top">
		<div style="padding-left: 5px;"><html:if
			test="dictCategoryAddChildBeanList.size>0">
			<script type="text/javascript" charset="UTF-8">
					webFXTreeConfig.rootIcon		= "<%=WEBPATH%>/images/xloadtree/page_white_magnify.gif";
					webFXTreeConfig.openRootIcon	= "<%=WEBPATH%>/images/xloadtree/page_white_magnify.gif";
					webFXTreeConfig.folderIcon		= "<%=WEBPATH%>/images/xloadtree/folder.png";
					webFXTreeConfig.openFolderIcon	= "<%=WEBPATH%>/images/xloadtree/openfolder.png";
					webFXTreeConfig.fileIcon		= "<%=WEBPATH%>/images/xloadtree/page_white_gear.gif";
					webFXTreeConfig.lMinusIcon		= "<%=WEBPATH%>/images/xloadtree/Lminus.png";
					webFXTreeConfig.lPlusIcon		= "<%=WEBPATH%>/images/xloadtree/Lplus.png";
					webFXTreeConfig.tMinusIcon		= "<%=WEBPATH%>/images/xloadtree/Tminus.png";
					webFXTreeConfig.tPlusIcon		= "<%=WEBPATH%>/images/xloadtree/Tplus.png";
					webFXTreeConfig.iIcon			= "<%=WEBPATH%>/images/xloadtree/I.png";
					webFXTreeConfig.lIcon			= "<%=WEBPATH%>/images/xloadtree/L.png";
					webFXTreeConfig.tIcon			= "<%=WEBPATH%>/images/xloadtree/T.png";
					webFXTreeConfig.blankIcon		= "<%=WEBPATH%>/images/xloadtree/blank.png";
					var treeDict = new WebFXTree("Data Dictionary",""); 
					<html:iterator value="dictCategoryAddChildBeanList" id="dictCategoryBeanList">
						<html:if test="child==0" >
							treeDict.add(new WebFXTreeItem("<html:property value="name"/>","javascript:showCategory('<html:property value="id"/>')","","<%=WEBPATH%>/images/xloadtree/folder.png"));
						</html:if>
						<html:else>
							treeDict.add(new WebFXLoadTreeItem("<html:property value="name"/>", "<%=WEBPATH%>/system/dict/child.crm?id=<html:property value="id"/>","javascript:showListAndTree('<html:property value="id"/>')"));
						</html:else>
					</html:iterator> 
					document.write(treeDict);
				</script>
		</html:if></div>
		</td>
		<!-- ============================ category list page start ====================== -->
		<td width="650" valign="top" id="categoryList">
		<table id="list_table_category" align="center" width="100%"  class="datatable"> 
		<tr><td colspan="3"><input type="button" class="x-btn" name="addDict" id="addDict" onclick="javascript:addCategory();" value=" <html:text name="button.new"></html:text> "><br><br></td></tr>
		<tr class="thead"><td style="width: 3%;"><input type="checkbox" name="selectall" onClick="MainSelectAll(this.form);"></td>
		<td style="width: 50%;"><html:text name="category.name"></html:text></td>
		<td style="width: 47%;"><html:text name="category.defined"></html:text></td>
		</tr> 
		<html:iterator value="dictCategoryAddChildBeanList" id="dictCategoryBeanList">

		<tr class="tbody">
			<td><input type="checkbox" name="listCategorySelect" <html:if test="userDefined==1">disabled="true"</html:if>
													id="listCategorySelect" value="<html:property value="id"/>"></td>
			<td><a href="#" onclick="javascript:showListAndTree('<html:property value="id"/>')"><html:property value="name" /></a></td>
			<td><html:if test="userDefined==0"><html:text name="category.user"></html:text>
				</html:if><html:else><html:text name="category.system"></html:text>
				</html:else></td>
		</tr>
		</html:iterator>
		
		</table>
		</td>
		<!-- ============================ category list page end ====================== -->
		<!-- ============================ category value page start ====================== -->
		<td width="650" valign="top" id="categoryValueTd" style="display: none;">
		<!--fieldset style="padding: 5px; LINE-HEIGHT: 170px; HEIGHT: 210px; width: 96%">
		<legend><html:text name="categoryValue.basic"></html:text></legend-->
		<table width="100%" border="0" cellspacing="0" cellpadding="3" class="detail">
			<tr>
				<td colspan="2" align="right">&nbsp;<input
					id="newCategoryValueBtn" class="x-btn" name="newCategoryValueBtn" type="button"
					
					value=" <html:text name="button.new"></html:text> "
					style="width: 90px" onclick="javascript:saveDictValue();"></input> &nbsp; &nbsp; &nbsp;<input
					name="updateCategoryValueBtn" id="updateCategoryValueBtn" class="x-btn"
					type="button"
					value=" <html:text name="button.modify"></html:text> "
					style="width: 90px" onclick="javascript:saveDictValue();"></input>&nbsp; &nbsp; &nbsp;<input
					name="deleteCategoryValueBtn" id="deleteCategoryValueBtn"
					type="button" class="x-btn"
					value=" <html:text name="button.delete"></html:text> "
					style="width: 90px" onclick="javascript:deleteSingleDictValue();"></input></td>
			</tr>
			<tr>
				<td width="20%" ><html:text
					name="categoryValue.name"></html:text></td>
				<td  width="80%" align="left" valign="top"><input type="hidden" id="dictId"
					name="dictId" /><input type="hidden" id="valueId"
					name="valueId" /> <input type="text" name="valueName" class="x-text"
					id="valueName" maxlength="100" style="width: 95%"
					/> <SPAN style="color:red;">*</SPAN></td>
			</tr>
			<tr>
				<td width="20%" ><html:text
					name="categoryValue.order"></html:text></td>
				<td align="left" valign="top"><input type="text" class="x-text"
					id="valueOrder" name="valueOrder" maxlength="10" style="width: 95%"
					/></td>
			</tr>

			<tr>

				<td width="20%" ><html:text
					name="categoryValue.defined"></html:text></td>
				<td align="left" valign="top"><select name="valueDefined"
					id="valueDefined" size="1" style="width: 95%">
					<option value="0"><html:text name="category.user"></html:text></option>
					<option value="1"><html:text name="category.system"></html:text></option>
				</select></td>
			</tr>
			<tr>
				<td width="20%" valign="top" ><html:text
					name="categoryValue.desc"></html:text></td>
				<td align="left" valign="top"><textarea  class="x-text" id="valueDesc"
					name="valueDesc" rows="5" style="width: 95%; height: 40"></textarea></td>
			</tr>
		</table>
		<!-- /fieldset>
		<fieldset align="center"
			style="padding: 5px; LINE-HEIGHT: 180px; HEIGHT: 230px; width: 96%"  valign="top">
		<legend><html:text name="categoryValue.filtration"></html:text></legend-->
		<table width="100%" border="0" cellspacing="0" cellpadding="3" class="detail">
			<tr>
				<td width="45%"><html:text name="categoryValue.filtration" /></td>
				<td colspan="2"><select id="dependentCateId"
					name="dependentCateId" onchange="javascript:changeDependent()"
					style="width: 100%;">
					<option value="-1" ></option>
				</select></td>
			</tr>
			<tr>
				<td width="45%"><html:text name="category.available"></html:text></td>
				<td width="10%"></td>
				<td width="45%"><html:text name="category.selected"></html:text></td>
			</tr>
			<tr>
				<td><select name="availableValueList" 
					id="availableValueList" style="width: 100%; height: 120px;"
					multiple="true">
				</select></td>
				<td align="center">
				<p><input type="button" name="B1" value=" &gt; "
					style="width: 30px" onclick="javascript:move('availableValueList','cateValueDepend');"></p>
				<p><input type="button" name="B2" value=" &gt;&gt; "
					style="width: 30px" onclick="javascript:moveAll('availableValueList','cateValueDepend');"></p>
				<p><input type="button" name="B3" value=" &lt; "
					style="width: 30px" onclick="javascript:move('cateValueDepend','availableValueList');"></p>
				<p><input type="button" name="B4" value=" &lt;&lt; "
					style="width: 30px" onclick="javascript:moveAll('cateValueDepend','availableValueList');"></p>
				</td>
				<td><select  name="cateValueDepend"
					id="cateValueDepend" style="width: 100%; height: 120px;"
					multiple="true"></select></td>
			</tr>
		</table>
		<!--/fieldset-->
		</td>
		<!-- ============================ category value page end ====================== -->
		<!-- ============================ category page start ====================== -->
		<td width="650" valign="top" id="categoryTd" style="display: none;">
		<table width="100%" border="0" cellpadding="0" cellspacing="0" class="detail">
			<tr>
				<td  colspan="3" align="right">&nbsp;<input
					id="saveCategoryBtn" name="saveCategoryBtn" class="x-btn" type="button" 
					value=" <html:text name="button.save"></html:text> "
					style="width: 90px" onclick="javascript:saveDict();"></input> &nbsp; &nbsp; &nbsp;<input
					name="deleteCategoryBtn" id="deleteCategoryBtn" class="x-btn" type="button" 
					value=" <html:text name="button.delete"></html:text> "
					style="width: 90px" onclick="javascript:delCateValue();"></input>&nbsp; &nbsp; &nbsp;<input
					name="updateCategoryBtn" id="updateCategoryBtn" type="button" 
					value=" <html:text name="button.modify"></html:text> "
					style="width: 90px" onclick="javascript:saveDict();" class="x-btn"></input></td>
			</tr>
			<tr>
				<td><html:text name="category.name"></html:text></td>
				<td colspan="2"><input type="hidden" id="id" name="id" /><input
					type="text" class="x-text" style="width: 95%" name="name" id="name"
					maxlength="100"><SPAN style="color:red;">*</SPAN></td>
			</tr>
			<tr>
				<td ><html:text name="category.order"></html:text></td>
				<td colspan="2"><input type="text" class="x-text" style="width: 95%;"
					maxlength="2" name="orderBy" id="orderBy"></td>
			</tr>

			<tr>
				<td ><html:text
					name="category.defined"></html:text></td>
				<td colspan="2"><select name="defined" id="defined" size="1"
					style="width: 95%;">
					<option value="0" selected="selected"><html:text
						name="category.user"></html:text></option>
					<option value="1"><html:text name="category.system"></html:text></option>
				</select></td>
			</tr>
			<tr>
				<td ><html:text name="category.desc"></html:text></td>
				<td colspan="2"><textarea style="width: 95%; height: 40;"
					name="desc" id="desc" class="x-text"></textarea></td>
			</tr>
			<tr>
				<td colspan="3"><html:text name="category.dependRelation"></html:text></td>
			</tr>
			<tr>
				<td  width="45%"><html:text
					name="category.available"></html:text></td>
				<td width="10%">&nbsp;</td>
				<td  width="45%"><html:text
					name="category.selected"></html:text></td>
			</tr>
			<tr>
				<td><select name="availableList"
					id="availableList" style="width: 100%; height: 120px;"
					multiple="true">
				</select></td>
				<td>
				<p><input type="button" name="B1" value=" &gt; "
					style="width: 30px" onclick="javascript:move('availableList','cateDepend');">&nbsp;</p>
				<p><input type="button" name="B2" value=" &gt;&gt; "
					style="width: 30px" onclick="javascript:moveAll('availableList','cateDepend');">&nbsp;</p>
				<p><input type="button" name="B3" value=" &lt; "
					style="width: 30px" onclick="javascript:move('cateDepend','availableList');">&nbsp;</p>
				<p><input type="button" name="B4" value=" &lt;&lt; "
					style="width: 30px" onclick="javascript:moveAll('cateDepend','availableList');"></p>
				</td>
				<td><select name="cateDepend"
					id="cateDepend" style="width: 100%; height: 120px;" multiple="true"></select></td>
			</tr>
		</table>
		<br>
		<table width="100%" id="valueSubList"  class="datatable"> 
			<tr>
				<td align="right" colspan="4"><input type="button" class="x-btn"
					id="addValueBtn" name="addValueBtn"
					value=" <html:text name="button.new"></html:text> "
					style="width: 90px" onclick="javascript:addCateValue();">&nbsp;
				<input type="button" id="delValueListBtn" class="x-btn"
					name="delValueListBtn"
					value=" <html:text name="button.delete"></html:text> "
					style="width: 90px" onclick="javascript:delCateValue();"><br><br></td>
			</tr>  
			<tr class="thead">
				<td width="5%" align="center"><input type="checkbox"
					id="subSelectAll" name="subSelectAll"
					onClick="javascript:subSelectFunction(this.form);"></td>
				<td width="40%"><html:text name="categoryValue.name"></html:text></td>
				<td width="25%"><html:text name="categoryValue.defined"></html:text></td>
				<td width="30%"><html:text name="categoryValue.order"></html:text></td>
			</tr> 
		</table>
		</td>
		<!-- ============================ category page end ====================== -->
	</tr>
</table>
</form>
<script type="text/javascript" language="javascript">
function delCateValue(){
	var id=jQuery('#id').attr("value");
	DictionaryAction.dwrDelete(id,deleteCallBackDictValue);
}

function deleteSingleDictValue(){
	var id=jQuery('#valueId').attr("value");
	DictionaryValueAction.dwrDelete(id,deleteCallBackDictValue);
}
function deleteCallBackDictValue(data){
	alert(data);
	window.location="<%=WEBPATH%>/system/dict/index.crm";
}
function saveDictValue(){
	 var dictCategoryValueBean={
		id: jQuery('#valueId').attr("value"),
		name: jQuery('#valueName').attr("value"),
		desc: jQuery('#valueDesc').attr("value"),
		userDefined: jQuery('#valueDefined').attr("value"),
		orderBy: jQuery('#valueOrder').attr("value"),
		dictId: jQuery('#dictId').attr("value"),
		childId: jQuery('#dependentCateId').attr("value"),
		childValueId:collectObjDataToString('cateValueDepend')
	};
	DictionaryValueAction.dwrSave(dictCategoryValueBean,saveDictValueCallBack);
}
function saveDictValueCallBack(data){
	alert(data);
	window.location="<%=WEBPATH%>/system/dict/index.crm";
}
function changeDependent(){
	var value=jQuery('#dependentCateId').attr("value");
	//alert(value);
	DictionaryCombAction.queryDictCategoryValueBeanById(value,availableValueListFunction);
	DictionaryFilterAction.queryDictCategoryValueBeansByMasterValueId(jQuery('#valueId').attr("value"),value,cateValueDependFunction);
}
function cateValueDependFunction(data){
	DWRUtil.removeAllOptions('cateValueDepend');
	DWRUtil.addOptions('cateValueDepend',data,"id","name");
}

function availableValueListFunction(data){
	DWRUtil.removeAllOptions('availableValueList');
	DWRUtil.addOptions('availableValueList',data,"id","name");
}
function saveDict(){
	   var DictCategoryBean={
			 id : jQuery('#id').attr("value"),
			 name : jQuery('#name').attr("value"),
			 desc : jQuery('#desc').attr("value"),
			 userDefined : jQuery('#defined').attr("value"),
			 orderBy : jQuery('#orderBy').attr("value"),
			 childDictId:collectObjDataToString('cateDepend')
	 };
	 DictionaryAction.dwrSave(DictCategoryBean,saveDictCallBack);
}
function saveDictCallBack(data){
	alert(data);
	window.location="<%=WEBPATH%>/system/dict/index.crm";
}
function MainSelectAll(iform){
	for(i=0; i<iform.listCategorySelect.length; i++){ 
		if(!(iform.listCategorySelect[i].disabled)){
			iform.listCategorySelect[i].checked=iform.selectall.checked;
		}
	} 	
}

function subSelectFunction(iform){
	for(i=0; i<iform.subCategorySelect.length; i++){
		if(!(iform.subCategorySelect[i].disabled)){
			iform.subCategorySelect[i].checked=iform.subSelectAll.checked;
		}
	} 	
}
//$(document).ready(function(){$("#accordion").accordion({autoheight:true});});
/*jQuery(document).ready(
	function(){
		jQuery(".x-btn-text ").mouseover(function(){ jQuery(this).addClass("x-btn-over");}).mouseout(function(){ jQuery(this).removeClass("x-btn-over");});
		jQuery(".x-form-text ").mouseover(function(){ jQuery(this).addClass("x-form-focus");}).mouseout(function(){ jQuery(this).removeClass("x-form-focus");});
	}
);*/ 
function showChild(id){
	DictionaryValueAction.treeChild(id,childTree(id));
}

function showCategory(id){
	dwr.util.useLoadingMessage();	
	DictionaryAction.treeDetail(id,update);
	delRow();
	var tableObject=_$('valueSubList');
	if(tableObject.rows.length<3){ 
		jQuery("#subSelectAll").attr("disabled",function(){return true;});
	}
} 
function update(data){  	
	jQuery('#id').val(data.id);
	jQuery('#name').val(data.name);
	jQuery('#defined').val(data.userDefined);
	jQuery('#desc').val(data.desc);
	jQuery('#orderBy').val(data.orderBy);
	DictionaryAction.mainCategory(data.id,availableMainCategory);
	DictionaryDependAction.childCategory(data.id,cateDependCategory);
	jQuery('#updateCategoryBtn').show();
	jQuery('#deleteCategoryBtn').show();
	jQuery('#saveCategoryBtn').hide();
	jQuery('#categoryTd').show();
	jQuery('#valueSubList').show();
	jQuery('#categoryList').hide();
	jQuery('#categoryValueTd').hide();
}
function addCategory(){
	jQuery('#id').val("");
	jQuery('#name').val(""); 
	jQuery('#desc').val("");
	jQuery('#orderBy').val("");
	jQuery('#updateCategoryBtn').hide();
	jQuery('#deleteCategoryBtn').hide();
	jQuery('#saveCategoryBtn').show();
	
	jQuery('#categoryTd').show();
	DictionaryAction.mainCategory("",availableMainCategory);
	jQuery('#categoryList').hide();
	jQuery('#categoryValueTd').hide(); 
	jQuery('#valueSubList').hide(); 
	
}

function delRow(){
	var tableObject=_$('valueSubList');
	var num=tableObject.rows.length;
	var i=0;
	for(i=num-1;i>1;i--){
		tableObject.deleteRow(i);
	} 
}
function addRow(data){
	var tableObject=_$('valueSubList');
	var num=tableObject.rows.length;
	var otr = tableObject.insertRow(num);
	var otd = otr.insertCell(0);
	otd.style.align="center";
	var stringHTML="<input type=\"checkbox\" name=\"subCategorySelect\" id=\"subCategorySelect\" value=\""+data.id;  
	if(data.userDefined==1){
		stringHTML=stringHTML+" disabled=\"true\" ";
	}
	stringHTML=stringHTML+"\">";
	otd.innerHTML=stringHTML;
	var otd1 = otr.insertCell(1); //showCategoryValue
	stringHTML="<a href=\"#\" "; 
	stringHTML=stringHTML+" onclick=\" javascript:showCategoryValue('"+data.id;
	stringHTML=stringHTML+"','"+jQuery('#id').attr("value");
	stringHTML=stringHTML+"');\" >"+data.name;
	stringHTML=stringHTML+"</a>";
	otd1.innerHTML=stringHTML;
	var otd2 = otr.insertCell(2);
	if(data.userDefined==0){ 
		otd2.innerHTML="<html:text name="category.user"></html:text>";
	}else{
		otd2.innerHTML="<html:text name="category.system"></html:text>";
	}
	var otd3 = otr.insertCell(3); 
	otd3.innerHTML=data.orderBy;
	
}
function availableMainCategory(data){
	DWRUtil.removeAllOptions('availableList');
	DWRUtil.addOptions('availableList',data,"id","name");
}
function cateDependCategory(data){
	DWRUtil.removeAllOptions('cateDepend');
	DWRUtil.addOptions('cateDepend',data,"id","name");
}
function showListAndTree(id){
	dwr.util.useLoadingMessage();
	DictionaryAction.treeDetail(id,update);
	DictionaryValueAction.treeChild(id,updateListValue);
}
function updateListValue(data){
	delRow();
	for(var i=0;i<data.length;i++){
		addRow(data[i]);
	}
	var tableObject=_$('valueSubList');
	if(tableObject.rows.length<3){ 
		jQuery("#subSelectAll").attr("disabled",function(){return true;});
		jQuery("#delValueListBtn").hide();
	}else{
		jQuery("#subSelectAll").attr("disabled",function(){return false;});
	}
}
function addCateValue(){
	jQuery('#dictId').val(jQuery('#id').attr("value"));
	jQuery('#valueId').val("");
	jQuery('#valueName').val(""); 
	jQuery('#valueDesc').val("");
	jQuery('#valueOrder').val("");
	DictionaryAction.queryDictCategoryBeanByMasterId(jQuery('#id').attr("value"),updateDependentCateId);
	jQuery('#updateCategoryValueBtn').hide();
	jQuery('#deleteCategoryValueBtn').hide();
	jQuery('#newCategoryValueBtn').show();
	jQuery('#categoryTd').hide();
	jQuery('#categoryList').hide();	
	jQuery('#categoryValueTd').show();
}


function updateValue(id){
	return function(data){
	jQuery('#dictId').val(id);
	jQuery('#valueId').val(data.id);
	jQuery('#valueName').val(data.name);
	jQuery('#valueDefined').val(data.userDefined);
	jQuery('#valueDesc').val(data.desc);
	jQuery('#valueOrder').val(data.orderBy);
	
	DictionaryAction.queryDictCategoryBeanByMasterId(id,updateDependentCateId);
	
	jQuery('#updateCategoryValueBtn').show();
	jQuery('#newCategoryValueBtn').hide();
	jQuery('#categoryTd').hide();
	jQuery('#categoryList').hide();
	jQuery('#categoryValueTd').show();
	};
}
function updateDependentCateId(data){
	DWRUtil.removeAllOptions('dependentCateId');
	DWRUtil.addOptions('dependentCateId',data,"id","name");
}
function showCategoryValue(valueId,id){
	DictionaryValueAction.treeValueDetail(valueId,updateValue(id));
}  

</script>
</body>
</html>